// scr/router/index.js就是当前项目的路由模块
// 1.导入 Vue 和 VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import Tab1 from '@/components/tab/Tab1.vue'
import Tab2 from '@/components/tab/Tab2.vue'

// 2.调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3.创建路由的实例对象
const router = new VueRouter({
  // routes是一个数组，作用：定义"hash值"与"组件"之间的对应关系
  routes: [
    // 路由规则
    // 路由重定向，访问"/"时，跳转到"/home"
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    {
      path: '/about',
      component: About,
      // 设置进入About组件直接打开Tab1子组件
      // redirect: '/about/tab1',
      children: [
        // 子路由规则
        // 默认子路由，将path设置为空即为默认子路由
        { path: '', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    }
  ]
})

// 声明全局前置守卫
// 只要发生路由跳转，都会触发beforeEach的回调函数
router.beforeEach((to, from, next) => {
  // to 表示即将访问的路由信息
  // from 表示即将离开的路由信息
  // 当前用户拥有访问后台主页的权限，直接放行 next()
  // 当前用户拥有访问后台主页的权限，强制跳转登录页 next('/login')
  // 当前用户拥有访问后台主页的权限，停留当前页 next(false)
  next()
})

// 4.向外共享路由的实例对象
export default router
